//响应式布局
//定义设备属性
$breakpoint: (
  //手机
  phone: (0px, 480px),
  //平板
  pad: (481px, 1200px),
  // 大屏幕
  tv: 1201px
);
//设置媒介查询j的响应式
@mixin responstTo($breakname) {
  $bp: map-get($breakpoint, $breakname);
  //判断类型
  @if type-of($bp) == 'list' {
    @media (min-width: nth($bp, 1)) and (max-width: nth($bp, 2)) {
      @content;
    }
  } @else {
    @media (min-width: $bp) {
      @content;
    }
  }
}
